<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <select name="" id="sel">
        <option value="">请选择省份</option>
    </select>
    <select name="" id="sel_two">
        <option value="" >请选择城市</option>
    </select>

    <select name="" id="sel_three">
        <option value="">请选择区县</option>
    </select>

</head>

<body>
    <script>


        fetch("./city.json").then(function (response) {
            return response.json();
        }).then(function (data) {
            // 一级
            let newSe = document.querySelector("#sel");
            let newSeTwo = document.querySelector("#sel_two");
            let newSeThree = document.querySelector("#sel_three");
            // 遍历
            for (k in data) {
                let newOp = document.createElement("option");
                newOp.innerText = k;
                newSe.appendChild(newOp);
                if (newSe.value=="") {
                    // console.log("a");
                    newSeTwo.disabled = true;
                    newSeThree.disabled=true;
                }
            }
            // 监听事件
            newSe.addEventListener("change", function (e) {
                //    console.log(e.target.value);
                console.log(data[e.target.value]);

                newSeTwo.innerText = "";
                for (key in data[e.target.value]) {
                    // console.log(key);
                    let newOp = document.createElement("option");
                    // console.log(data[key]);

                    newOp.innerText = key;
                    newSeTwo.appendChild(newOp);
                    if (!newSe.value=="") {
                    newSeTwo.disabled = false;
                    newSeThree.disabled=true;
                }
                }
                city=e.target.value;

            })

            newSeTwo.addEventListener("click", function (e) {
                console.log(e.target.value);

                newSeThree.innerText = "";
                data[city][e.target.value].forEach(function(item){
                    console.log(item);
                    let newOp = document.createElement("option");
                        newOp.innerText = item;
                        newSeThree.appendChild(newOp);
                })
                if (!newSe.value=="") {
                    // console.log("a");
                    newSeTwo.disabled = false;
                    newSeThree.disabled=false;
                }
            })



        }).catch(function (err) {
            console.log(err);

        })
    </script>
</body>

</html>